<script setup>
import {ref} from "vue";
import Message from "@/component/Message.vue";
let  arr=ref([1,2,3,4])
let text= '<span style="color: red">哈哈哈</span>'
let grade=88
let time = ref(new Date()) //{value:''}
let name=''
let pid='test'
let students=[{name:'小明',sd:495},{name: '小红',sd:493},{name: '小白',sd:623},{name:'小段',sd:892},{name: '小王',sd:355}]
// 点击事件的本质是方法
let inputValue=ref('段')//{value:'段'}
const btnEvent=function (){
  console.info(inputValue.value)
}
setInterval(()=>{
  time.value = new Date()
},1000)
const addvalue=()=>{
  //不建议这样写 arr[arr.length]=inputValue.value
  arr.value.push(inputValue.value)
}
</script>
<template>
  <div>
    <h1>Hello world 段璎芮</h1>
    <p>
      Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
      documentation
    </p>
    <p v-for="(item,index) in arr " v-bind:key="index">{{item}}</p>
    <!--   插值表达式-->
    <h1>{{time}}</h1>
    <!--  v-text将变量的值赋予标签内部-->
    <p v-text="text"></p>
    <!--  v-html将变量的值赋予标签内部，且可以编译-->
    <p v-html="text"></p>
    <!--   v-if如果不满足结果时不出现在页面-->
    <p v-if="grade>90">优秀</p>
    <p v-else-if="grade>80">良好</p>
    <p v-else-if="grade>60">及格</p>
    <p v-if="name">{{name}}</p>
    <!--   v-show 如果不满足结果时出现在页面-->
    <p v-show="grade>90">123</p>
    <p v-bind:id="pid">这是</p>
    <p :id="pid">这是</p>
    <table border="1"  cellspacing="0">
      <tr>
        <td>序号</td>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      <tr v-for="(item,index) in students" v-bind:key="index">
        <td>{{index+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.sd}}</td>
      </tr>
    </table>
    <br>
    <input  v-model="inputValue" type="text" name="" id="">
    <br>
    <button @click="btnEvent" id="btn">按钮</button>
    输出方括号的值：{{inputValue}}
    当前时间：{{time}}
    <br>
    <button @click="addvalue">给数组加一个值</button>
<Message pagevalue="demo"/>
  </div>

</template>

<style scoped></style>
<!--注释demo-->